<template>
  <el-dialog
    v-model="dialogFormVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    title="密码重置"
    width="600px"
  >
    <div class="form-w-6">
      <el-form
        ref="formRef"
        :hide-required-asterisk="true"
        label-width="80px"
        :model="form"
        :rules="rules"
        style="margin-left: 70px"
      >
        <el-form-item label="密码：">
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              maxlength="32"
              size="32"
              type="password"
              @copy.capture.prevent="handleFalse"
              @cut.capture.prevent="handleFalse"
              @paste.capture.prevent="handleFalse"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item label="确认密码：">
          <el-form-item prop="surePwd">
            <el-input
              v-model="form.surePwd"
              maxlength="32"
              size="32"
              type="password"
              @copy.capture.prevent="handleFalse"
              @cut.capture.prevent="handleFalse"
              @paste.capture.prevent="handleFalse"
            />
          </el-form-item>
        </el-form-item>
        <div>
          <el-form-item>
            <el-button type="primary" @click.prevent="handleSave">
              保存
            </el-button>
            <el-button type="info" @click="close">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script lang="ts">
  import { updatePwd } from '@/api/system/user'
  import { validPwdLow } from '@/utils/validate'
  import aes from '@/utils/aes.js'
  // const Base64 = require('js-base64').Base64
  import {Base64} from 'js-base64'
  import { ElMessage, ElMessageBox } from 'element-plus'
  export default defineComponent({
    name: 'PwdSet',
    setup() {
      const validatePassword = (rule, value, callback) => {
        if (value !== '' && !validPwdLow(value)) {
          callback(new Error('长度8~32须包含大小写英文及字符!@~#%&*'))
        } else {
          callback()
        }
      }
      const pwdequal = (rule, value, callback) => {
        if (value !== '' && value !== state.form.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      const state = reactive({
        formRef: null,
        form: {
          id: undefined,
          username: '',
          password: '',
          surePwd: '',
        },
        rules: {
          password: [
            {
              required: true,
              trigger: ['blur', 'change'],
              message: '请输入密码',
            },
            { trigger: ['blur', 'change'], validator: validatePassword },
          ],
          surePwd: [
            {
              required: true,
              trigger: ['blur', 'change'],
              message: '请输入确认密码',
            },
            {
              trigger: ['blur', 'change'],
              validator: pwdequal,
            },
          ],
        },
        dialogFormVisible: false,
      })

      const handleFalse = () => {
        return false
      }
      const showEdit = (row) => {
        state.form.id = row.id
        state.form.username = row.username
        state.form.password = ''
        state.form.surePwd = ''
        state.dialogFormVisible = true
        nextTick(() => {
          state.formRef.clearValidate()
        })
      }
      const close = () => {
        state.formRef.resetFields()
        state.form = {
          id: undefined,
          username: '',
          password: '',
          surePwd: '',
        }
        state.dialogFormVisible = false
      }
      const handleSave = () => {
        if (state.form.password === state.form.username) {
          ElMessage.error('密码不能跟用户名一样')
          return false
        }
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { code } = await updatePwd({
              id: state.form.id,
              username: state.form.username,
              password: Base64.encode(
                aes.encrypt(
                  state.form.password,
                  aes.rightPad(state.form.username + '#17pwd', 32, aes.keyM)
                )
              ),
            })
            if (code === 1) {
              ElMessage.success('操作成功')
              close()
            }
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        handleSave,
        handleFalse,
      }
    },
  })
</script>
